<template>
  <div class="bg">
    <!-- 顶部标题 -->
    <div class="top">
      <p class="top-text">资金明细</p>
    </div>
    <!-- 搜索栏 -->
    <div class="search">
      <div class="interval">
        <el-select v-model="selects" clearable placeholder="请选择类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="block">
        <el-date-picker
          v-model="timear"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
      </div>
      <div class="search-button">
        <el-button type="primary" icon="el-icon-search" @click="searchs()"
          >搜索</el-button
        >
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="{ border: '0.5px solid #e6e6e6'}"
        :default-sort="{ prop: 'date', order: 'descending' }"
        :header-cell-style="header"
      >
        <el-table-column
          prop="id"
          label="记录ID"
          width="160"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column
          label="类型"
          width="160"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <span
              :class="[
                scope.row.type == '扣款'
                  ? 'state-color3'
                  : scope.row.type == '退款'
                  ? 'state-color4'
                  : 'state-color5',
              ]"
            >
              {{
                scope.row.type == "1"
                  ? "扣款"
                  : scope.row.type == "5"
                  ? "退款"
                  : "冲正"
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="merchant_name"
          label="商户名称"
          width="174"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="merchants_pwd"
          label="商户号"
          width="250"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="order_number"
          label="订单号"
          width="250"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="amount_before_change"
          label="变动前金额"
          width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="variable_amount"
          label="变动金额"
          width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="amount_after_change"
          label="变动后金额"
          width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作时间"
          width="260"
          align="center"
        >
        <template slot-scope="scope">
            <span> {{ $timer(scope.row.operating_time) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>

    <!-- 查看弹窗 -->
    <el-dialog title="查看充值申请" :visible.sync="dialogVisible" width="30%">
      <div class="popup">
        <div class="top">
          <p class="top-text">平台信息</p>
        </div>
        <el-input placeholder="暂无" readonly v-model="input1.state">
          <template slot="prepend">订单状态:</template>
        </el-input>
        <el-input placeholder="暂无" readonly v-model="input1.amount">
          <template slot="prepend">转账金额:</template>
        </el-input>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      timear: "",
      selects: "",
      limit:10,
      page:1,
      count:0,
      options: [
        {
          value: "4",
          label: "扣款",
        },
        {
          value: "5",
          label: "退款",
        },
        {
          value: "2",
          label: "冲正",
        },
      ],
      value: "",
      currentPage1: 1,
      dialogVisible: false,
      value1: "",
      value2: "",
      input1: {
        state: "",
        amount: "",
      },
      vall:10,
    };
  },
  methods: {
    searchs() {
      this.$axios({
        url: "/system/user/mm/funddetails/selectZjmxByTypeAndTime",
        method: "GET",
        params: {
          first_time: this.timear[0],
          last_time: this.timear[1],
          limit: this.limit,
          page: this.page,
          type: this.selects,
        },
      })
        .then((res) => {
          console.log('搜索',res);
          this.tableData = res.data.data
        })
        .catch((error) => {
          console.log(error);
        });
    },
   handleSizeChange(val) {
      this.vall = val
       this.$axios({
      url: "/system/user/mm/funddetails/findZjmxAll",
      method: "GET",
      params: {
        limit: this.vall,
        page: this.page,
      },
    })
      .then(({data}) => {
        this.tableData = data.data

      })
      .catch((error) => {
        console.log(error);
      });
    },
    handleCurrentChange(val) {
      this.$axios({
      url: "/system/user/mm/funddetails/findZjmxAll",
      method: "GET",
      params: {
        limit: this.vall,
        page: val,
      },
    })
      .then(({data}) => {
        this.tableData = data.data

      })
      .catch((error) => {
        console.log(error);
      });
    },
    header() {
      return {
        background: "rgba(242,242,242)",
        border: "0.5px solid #e6e6e6",
      };
    },
  },
  mounted() {
    // 渲染表格
    this.$axios({
      url: "/system/user/mm/funddetails/findZjmxAll",
      method: "GET",
      params: {
        limit: this.limit,
        page: this.page,
      },
    })
      .then(({data}) => {
        console.log(data);
        this.tableData = data.data
        this.count = data.count

      })
      .catch((error) => {
        console.log(error);
      });

// 类型
       this.$axios({
      url: "/system/admin/mm/merchantaccountchange/selectshzbType",
      method: "GET",
    })
      .then((res) => {
        console.log('类型',res);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style lang="scss" scoped>
template {
  padding: 15px;
}
.bg {
  background-color: white;
}
.interval {
  margin-right: 15px;
}
// 顶部标题
.top {
  padding: 15px 0;
  border-bottom: 2px solid #f6f6f6;
}
.top-text {
  font-size: 14px;
  padding: 0 15px;
}
// 搜索栏
.search {
  padding: 20px 7.5px;
  display: flex;
}
.search-button {
  padding-left: 15px;
}

// 表格
.table {
  margin: 20px 7.5px;
}

// 弹窗
.popup {
  background: #f2f2f2;
  height: 180px;
}

// 分页
.footer {
  padding: 0 7.5px 50px 7.5px;
}

.state-color3 {
  color: white;
  background-color: greenyellow;
}
.state-color4 {
  color: white;
  background-color: rgb(255, 145, 0);
}
.state-color5 {
  color: white;
  background-color: rgb(255, 0, 106);
}
</style>